<main id="contractChangeIndex" class="pl-24 pr-24">
	<hl-page-header title="合同变更"></hl-page-header>
	<section class="content_container">
		<div>
			<span class="title">变更单号：</span>
			<div class="content">{{code}}</div>
		</div>
		<div>
			<span class="title">合同管理编号：</span>
			<div class="content">{{mCode}}</div>
		</div>
		<div>
			<span class="title">变更生效日：</span>
			<div class="content">
				<web-calendar type="primary" v-model="updateTime" tips="请选择时间" width="310" @change="selectDate">
				</web-calendar>
			</div>
		</div>
		<div>
			<span class="title">变更内容：</span>
			<div class="content dy-flex" style="align-items: center">
				<hl-checkbox :data="tabList" v-model="tabActive"></hl-checkbox>
				<el-tooltip placement="bottom" effect="light">
					<span class="icon-Gm-explain inline-block"></span>
					<div slot="content" class="warmBox line-height-34">
						<div class="warm_t">基本信息包括</div>
						<div class="warm_c font-12">合同基本信息，乙方信息，自定义字段</div>
						<div class="warm_t">条款信息包括</div>
						<div class="warm_c font-12">合同房源，合同租约期，合同费项与付款计划</div>
					</div>
				</el-tooltip>
			</div>
		</div>
		<div v-if="tabActive.indexOf('AG') != -1">
			<span class="title">补充协议：</span>
			<hl-button @on-click="uploadFile">上传文件</hl-button>
		</div>
		<ul class="fileList mt-15 mb-10" v-if="tabActive.indexOf('AG') != -1" style="padding-left: 100px;">
			<li v-for="(item,index) in fileList" style="margin:0 80px 10px 0">
				<span class="icon-Nav-contract-file"></span>
				<span class="fileName">{{item.name}}</span>
				<span class="icon-Gm-delete-2" @click="delFileItem(index)"></span>
			</li>
		</ul>
		<div style="align-items: flex-start">
			<span class="title">变更说明：</span>
			<div class="content">
				<textarea class="form-control" style="height: 160px;width:580px;" v-model="instr"></textarea>
			</div>
		</div>
	</section>
	<!-- 操作区 -->
	<div class="operationBox">
		<hl-button type="primary" @on-click="next">下一步</hl-button>
		<div v-if="tabActive + '' == 'AG'" class="ml-10">
			<hl-button type="outline"  @on-click="saveChangeContract(0)">保存</hl-button>
			<hl-button type="outline"  @on-click="saveChangeContract(1)">提交审批</hl-button>
		</div>
	</div>

	<div class="upload-file-button"></div>
	<div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
</main>
<style>
	.operationBox{
		display: flex;
		align-items: center;
	}
	.content_container {
		padding: 24px 0 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid #F2F2F2
	}

	.content_container>div {
		display: flex;
		margin-bottom: 16px;
		align-items: center;
	}

	.title {
		color: #666;
		width: 100px;
	}

	.hl-checkbox-container .item {
		margin-bottom: 0
	}

	.el-tooltip__popper.is-light {
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		border: 0;
	}

	.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow,
	.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow {
		border: 0;
	}

	.loadprogress {
		position: fixed;
		z-index: 999999;
		left: 0;
		bottom: 0;
		height: 20px;
		width: 500px;
		font-size: 12px;
		text-indent: 3px;
		line-height: 20px;
	}

	.fileList {
		display: flex;
		flex-wrap: wrap;
	}
</style>
<script src="modules/contratchange/scripts/index.js" charset="utf-8"></script>
